


.container {
  padding: 0 30px 90px;
  background: #fff;
  img {
    max-width: 100%;
  }
  &.topic-container {
    padding-bottom: 108px;
  }
  p {
    margin-bottom: 0;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(228, 228, 228, 1);
    font-size: 30px;
    :global {
      .ant-rate {
        padding-left: 32px;
      }
      .am-tag {
        padding: 0 10px;
      }
      .am-tag+.am-tag {
        margin-left: 16px;
      }
    }
    .tag {
      padding-right: 32px;
    }
    .success,
    .fail {
      display: inline-flex;
      align-items: center;

      >img {
        width: 30px;
        margin-right: 20px;
      }
    }

    .success {
      margin-right: 80px;
      color: @brand-primary;
    }

    .fail {
      color: @brand-error;
    }

    .current {
      width: 90px;
      height: 42px;
      font-weight: 400;
      // color: $font-color_second;
      line-height: 42px;
    }
  }

  .question {
    margin-top: 30px;
    margin-bottom: 50px;
   
    text-align: justify;
    .sign {
      display: inline-block;
      width: 64px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(135deg, rgba(180, 193, 255, 1) 0%, rgba(108, 128, 229, 1) 100%);
      border-radius: 16px 16px 16px 0;
      font-size: 20px;
      color: #fff;
      margin-right: 10px;
      float: left;
      font-weight: 500;
    }

    .contant {
      text-align: justify;
      font-size: 34px;
      font-weight: 400;
      color: #363636;
      line-height: 48px;
      text-align: justify;
    }
  }

  .answers {
    >div {
      display: flex;
      margin-bottom: 40px;

      >span:first-child {
        display: inline-flex;
        align-items: center;
        width: 86px;
        >img{
          width: 56px;
          border-radius: 50%;
          box-shadow: 0px 0px 16px 0px rgba(29, 44, 119, 0.1);
        }

        >span {
          width: 56px;
          height: 56px;
          text-align: center;
          line-height: 52px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 16px 0px rgba(29, 44, 119, 0.1);
          font-size: 32px;

          &.active {
            background: #6C80E5;
            color: #fff;
          }
        }
      }

      >span:last-child {
        flex: 1;
        font-size: 30px;
        color: rgba(54, 54, 54, 1);
        line-height: 46px;
        text-align: justify;
      }
    }

    
  }
  .rightAnswers {
    margin: 60px 0 16px;
    padding: 20px 40px;
    background: rgba(244, 245, 248, 1);
    border-radius: 20px;
    font-size: 30px;
    font-weight: 500;
    
    
    >span {
      flex: 1;

      &:last-child {
        text-align: right;
        padding-left: 32px;
        font-weight: 500;
      }
    }
  }
  .statistics {
    color: #999;
    font-size: @font-size-caption-sm;
    span {
      padding: 0 8px;
      color: @brand-primary;
    }
  }
  .splitter {
    height: 20px;
    background: rgba(244, 245, 248, 1);
    margin-left: -30px;
    margin-right: -30px;
  }

  .parse {
    padding-top: 40px;
    padding-bottom: 52px;
    img {
      max-width: 100%;
    }
    :global {
      .ant-rate {
        padding-left: 32px;
      }
      .am-tag {
        padding: 0 10px;
      }
      .am-tag+.am-tag {
        margin-left: 16px;
      }
    }
    .tag {
      padding-left: 32px;
    }
    >div:first-child {
      display: flex;
      align-items: center;
      font-size: 28px;
      line-height: 40px;
      margin-bottom: 16px;

      >i {
        display: inline-flex;
        width: 8px;
        height: 20px;
        background: @brand-primary;
        border-radius: 4px;
        margin-right: 10px;
      }
    }

    >div:last-child {
      padding: 24px;
      border-radius: 20px;
      border: 1px solid rgba(228, 228, 228, 1);
      font-size:30px;
      line-height:46px;
      font-weight:400;
    }
  }

  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 108px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    justify-content: space-between;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 10px 0px rgba(54, 54, 54, 0.05);
    @include safeBottom;

    .button {
      width: 240px;
      padding: 0;
    }
  }
  .showResult {
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    align-items: center;
    :global {
      .am-checkbox {
        top: -6px;
      }
    }
  }
}